import React, { useState } from 'react';
import { Card, Row, Col, Progress, Button, Typography, Space, Divider } from 'antd';
import { 
  ExperimentOutlined, // For water
  ThunderboltOutlined, 
  ReadOutlined, // For reading
  BulbOutlined 
} from '@ant-design/icons';
import { translations } from '../translations';

const { Title, Text } = Typography;

type HabitRecord = {
  id: string;
  name: string;
  icon: React.ReactNode;
  streak: number;
  completed: boolean;
};

export default function DashboardPage() {
  console.log("DashboardPage rendering"); // Debug log
  
  const [habits, setHabits] = useState<HabitRecord[]>([
    { id: '1', name: translations.waterHabit, icon: <ExperimentOutlined style={{ fontSize: 24, color: '#1890ff' }} />, streak: 5, completed: false },
    { id: '2', name: translations.exerciseHabit, icon: <ThunderboltOutlined style={{ fontSize: 24, color: '#fa8c16' }} />, streak: 3, completed: false },
    { id: '3', name: translations.readingHabit, icon: <ReadOutlined style={{ fontSize: 24, color: '#722ed1' }} />, streak: 7, completed: false },
    { id: '4', name: translations.meditationHabit, icon: <BulbOutlined style={{ fontSize: 24, color: '#eb2f96' }} />, streak: 2, completed: false },
  ]);

  const handleRecordHabit = (id: string) => {
    setHabits(prev => prev.map(habit => 
      habit.id === id ? { ...habit, completed: true } : habit
    ));
  };

  return (
    <div style={{ 
      padding: '0 16px 24px', 
      maxWidth: '800px', 
      margin: '0 auto', 
      background: 'white',
      borderRadius: '0 0 8px 8px',
      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)'
    }}>
      {/* Summary Cards */}
      <Row gutter={[16, 24]} style={{ marginTop: 24 }}>
        <Col xs={24} sm={12}>
          <Card bordered={false} className="summary-card">
            <div style={{ textAlign: 'center' }}>
              <Title level={2} style={{ color: '#52c41a', margin: 0 }}>6.4<Text style={{ fontSize: 16 }}>小时</Text></Title>
              <Progress 
                percent={80} 
                showInfo={false} 
                strokeColor="#52c41a"
                trailColor="#d9f7be" 
                className="progress-container"
              />
              <Text type="secondary">{translations.targetHours(8)}</Text>
            </div>
          </Card>
        </Col>
        <Col xs={24} sm={12}>
          <Card bordered={false} className="summary-card">
            <div style={{ textAlign: 'center' }}>
              <Title level={2} style={{ color: '#52c41a', margin: 0 }}>75<Text style={{ fontSize: 16 }}>%</Text></Title>
              <Progress 
                percent={75} 
                showInfo={false} 
                strokeColor="#52c41a"
                trailColor="#d9f7be" 
                className="progress-container"
              />
              <Text type="secondary">{translations.completionRatio(3, 4)}</Text>
            </div>
          </Card>
        </Col>

        {/* Today's Habits */}
        <Col span={24}>
          <Card bordered={false} style={{ borderRadius: 8 }}>
            <Title level={4} style={{ margin: '0 0 16px 0' }}>{translations.todayHabits}</Title>
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
              {habits.map(habit => (
                <div key={habit.id} className="habit-card">
                  <div style={{ marginRight: 16 }}>
                    {habit.icon}
                  </div>
                  <div style={{ flex: 1 }}>
                    <div>{habit.name}</div>
                    <div style={{ fontSize: 12, color: '#8c8c8c' }}>{translations.consecutiveDays(habit.streak)}</div>
                  </div>
                  <Button 
                    type="primary" 
                    className={habit.completed ? "" : "record-button"}
                    style={{ backgroundColor: habit.completed ? '#d9d9d9' : undefined, borderColor: habit.completed ? '#d9d9d9' : undefined }}
                    onClick={() => handleRecordHabit(habit.id)}
                    disabled={habit.completed}
                  >
                    {translations.recordButton}
                  </Button>
                </div>
              ))}
            </Space>
          </Card>
        </Col>

        {/* Weekly Summary */}
        <Col span={24}>
          <Card bordered={false} style={{ borderRadius: 8, backgroundColor: '#f6ffed' }}>
            <Title level={4} style={{ margin: '0 0 16px 0' }}>{translations.weeklySummary}</Title>
            <Space direction="vertical" size="middle" style={{ width: '100%' }}>
              <div>{translations.waterIncrease}</div>
              <Divider style={{ margin: '8px 0' }} />
              <div>{translations.averageSteps}</div>
              <Divider style={{ margin: '8px 0' }} />
              <div>{translations.sleepImprovement}</div>
              <Divider style={{ margin: '8px 0' }} />
              <div>{translations.habitCompletion}</div>
            </Space>
          </Card>
        </Col>
      </Row>

      <div className="footer-text">
        {translations.footer}
      </div>
    </div>
  );
}